<template> 

<div class="shop_container">
       		 <ul class="shop_list">


       		 	<li class="shop_li">
       		 		<a href="javascript:;">

       		 			 <div class="shop_left">
       		 			 	<img class="shop_img" src="./img/shop/1.jpg">
       		 			 </div>

       		 			 <div class="shop_right">
       		 			 	  <section class="shop_detail_header">
       		 			 	  	<h4 class="shop_title ellipsis">锄禾日当午，汗滴禾下土</h4>
       		 			 	  	<ul class="shop_detail_ul">
       		 			 	  		<li class="supports">保</li>
       		 			 	  		<li class="supports">准</li>
       		 			 	  		<li class="supports">票</li>
       		 			 	  	</ul>

       		 			 	  </section>
       		 			 	  <section class="shop_rating_order">
       		 			 	  	<section class="shop_rating_order_left">

       		 			 	  		<div class="star star-24">
       		 			 	  		 <span class="star-item on"></span>
       		 			 	  		 <span class="star-item on"></span>
       		 			 	  		 <span class="star-item on"></span>
       		 			 	  		 <span class="star-item half"></span>
       		 			 	  		 <span class="star-item off"></span>
       		 			 	  		</div>

       		 			 	  		<div class="rating_section">3.6</div>
       		 			 	  		<div class="order_section">月售106单</div>
       		 			 	  	</section>

       		 			 	  	<section class="shop_rating_order_right">
       		 			 	  		<span class="delivery_style delivery_right">硅谷专送</span>
       		 			 	  	</section>

       		 			 	  </section>


       		 			 	  <section class="shop_distance">
       		 			 	  	<p class="shop_delivery_msg">
       		 			 	  		<span>¥20起送</span>
       		 			 	  		<span class="segmentation">/</span>
       		 			 	  		<span>配送费约¥5</span>
       		 			 	  	</p>
       		 			 	  </section>


       		 			 </div>
       		 		</a>
       		 	</li>
             		 	<li class="shop_li">
       		 		<a href="javascript:;">

       		 			 <div class="shop_left">
       		 			 	<img class="shop_img" src="./img/shop/2.jpg">
       		 			 </div>

       		 			 <div class="shop_right">
       		 			 	  <section class="shop_detail_header">
       		 			 	  	<h4 class="shop_title ellipsis">锄禾日当午，汗滴禾下土</h4>
       		 			 	  	<ul class="shop_detail_ul">
       		 			 	  		<li class="supports">保</li>
       		 			 	  		<li class="supports">准</li>
       		 			 	  		<li class="supports">票</li>
       		 			 	  	</ul>

       		 			 	  </section>
       		 			 	  <section class="shop_rating_order">
       		 			 	  	<section class="shop_rating_order_left">

       		 			 	  		<div class="star star-24">
       		 			 	  		 <span class="star-item on"></span>
       		 			 	  		 <span class="star-item on"></span>
       		 			 	  		 <span class="star-item on"></span>
       		 			 	  		 <span class="star-item half"></span>
       		 			 	  		 <span class="star-item off"></span>
       		 			 	  		</div>

       		 			 	  		<div class="rating_section">3.2</div>
       		 			 	  		<div class="order_section">月售106单</div>
       		 			 	  	</section>

       		 			 	  	<section class="shop_rating_order_right">
       		 			 	  		<span class="delivery_style delivery_right">硅谷专送</span>
       		 			 	  	</section>

       		 			 	  </section>


       		 			 	  <section class="shop_distance">
       		 			 	  	<p class="shop_delivery_msg">
       		 			 	  		<span>¥20起送</span>
       		 			 	  		<span class="segmentation">/</span>
       		 			 	  		<span>配送费约¥5</span>
       		 			 	  	</p>
       		 			 	  </section>


       		 			 </div>
       		 		</a>
       		 	</li>
       		 	<li class="shop_li">
       		 		<a href="javascript:;">

       		 			 <div class="shop_left">
       		 			 	<img class="shop_img" src="./img/shop/3.jpg">
       		 			 </div>

       		 			 <div class="shop_right">
       		 			 	  <section class="shop_detail_header">
       		 			 	  	<h4 class="shop_title ellipsis">锄禾日当午，汗滴禾下土</h4>
       		 			 	  	<ul class="shop_detail_ul">
       		 			 	  		<li class="supports">保</li>
       		 			 	  		<li class="supports">准</li>
       		 			 	  		<li class="supports">票</li>
       		 			 	  	</ul>

       		 			 	  </section>
       		 			 	  <section class="shop_rating_order">
       		 			 	  	<section class="shop_rating_order_left">

       		 			 	  		<div class="star star-24">
       		 			 	  		 <span class="star-item on"></span>
       		 			 	  		 <span class="star-item on"></span>
       		 			 	  		 <span class="star-item on"></span>
       		 			 	  		 <span class="star-item half"></span>
       		 			 	  		 <span class="star-item off"></span>
       		 			 	  		</div>

       		 			 	  		<div class="rating_section">3.6</div>
       		 			 	  		<div class="order_section">月售106单</div>
       		 			 	  	</section>

       		 			 	  	<section class="shop_rating_order_right">
       		 			 	  		<span class="delivery_style delivery_right">硅谷专送</span>
       		 			 	  	</section>

       		 			 	  </section>


       		 			 	  <section class="shop_distance">
       		 			 	  	<p class="shop_delivery_msg">
       		 			 	  		<span>¥20起送</span>
       		 			 	  		<span class="segmentation">/</span>
       		 			 	  		<span>配送费约¥5</span>
       		 			 	  	</p>
       		 			 	  </section>


       		 			 </div>
       		 		</a>
       		 	</li>
       		 	<li class="shop_li">
       		 		<a href="javascript:;">

       		 			 <div class="shop_left">
       		 			 	<img class="shop_img" src="./img/shop/4.jpg">
       		 			 </div>

       		 			 <div class="shop_right">
       		 			 	  <section class="shop_detail_header">
       		 			 	  	<h4 class="shop_title ellipsis">锄禾日当午，汗滴禾下土</h4>
       		 			 	  	<ul class="shop_detail_ul">
       		 			 	  		<li class="supports">保</li>
       		 			 	  		<li class="supports">准</li>
       		 			 	  		<li class="supports">票</li>
       		 			 	  	</ul>

       		 			 	  </section>
       		 			 	  <section class="shop_rating_order">
       		 			 	  	<section class="shop_rating_order_left">

       		 			 	  		<div class="star star-24">
       		 			 	  		 <span class="star-item on"></span>
       		 			 	  		 <span class="star-item on"></span>
       		 			 	  		 <span class="star-item on"></span>
       		 			 	  		 <span class="star-item half"></span>
       		 			 	  		 <span class="star-item off"></span>
       		 			 	  		</div>

       		 			 	  		<div class="rating_section">4.1</div>
       		 			 	  		<div class="order_section">月售106单</div>
       		 			 	  	</section>

       		 			 	  	<section class="shop_rating_order_right">
       		 			 	  		<span class="delivery_style delivery_right">硅谷专送</span>
       		 			 	  	</section>

       		 			 	  </section>


       		 			 	  <section class="shop_distance">
       		 			 	  	<p class="shop_delivery_msg">
       		 			 	  		<span>¥20起送</span>
       		 			 	  		<span class="segmentation">/</span>
       		 			 	  		<span>配送费约¥5</span>
       		 			 	  	</p>
       		 			 	  </section>


       		 			 </div>
       		 		</a>
       		 	</li>



       		 </ul>
       	</div>

</template> 


<script> 


export default {

  name: '', 
  components: { } 


} 


</script>

<style lang="stylus" rel="stylesheet/stylus">
	@import "../../common/stylus/mixins.sty";
	@import "../../static/css/reset.css";
.shop_container		
			margin-bottom 50px
			.shop_list
				.shop_li
					bottom-border-1px(#e4e4e4)
					width 100%
					>a
						clearFix()
						display block
						width 100%
						padding 15px 8px
						box-sizing border-box
						.shop_left
							width 23%
							height 75px
							float left
							padding-right 10px
							box-sizing border-box
							.shop_img
								display block
								width 100%
								height 100%
						.shop_right
							float right
							width 77%
							.shop_detail_header
								clearFix()
								width 100%
								.shop_title
									float left
									width 200px
									color #333
									font-size 16px
									line-height 16px
									font-weight 700
									&::before
										content '品牌'
										display inline-block
										background-color #fdd930
										padding 2px 
										border-radius 2px
										margin-right 5px
										font-size 11px
										line-height 11px
								.shop_detail_ul
									float right
									margin-top 3px
									.supports
										float left
										font-size 10px
										padding 0px 2px
										border-radius 2px
										color #999
										border 1px solid #f1f1f1
							.shop_rating_order
								clearFix()
								width 100%
								margin 18px 0px 8px
								.shop_rating_order_left
									float left
									color #ff9a0d

									.star
										float left
										font-size 0
										.star-item
											display inline-block
											background-repeat no-repeat	
										&.star-48
											.star-item
												width 20px
												height 20px
												margin-right 20px
												background-size 20px 20px
												&:last-child
													margin-right 0px
												&.on
													bg-image('./img/stars/star48_on')
												&.half
													bg-image('./img/stars/star48_half')
												&.off
													bg-image('./img/stars/star48_off')			
										&.star-36	
											.star-item
												width 15px
												height 15px
												margin-right 15px
												background-size 15px 15px
												&:last-child
													margin-right 0
												&.on
													bg-image('./img/stars/star36_on')
												&.half
													bg-image('./img/stars/star36_half')	
												&.off
													bg-image('./img/stars/star36_off')		

										&.star-24
											.star-item
												width 10px
												height 10px
												background-size 10px 10px
												margin-right 3px
												&:last-child
													margin-right 0px
												&.on
													bg-image('./img/stars/star24_on')
												&.half
													bg-image('./img/stars/star24_half')
												&.off
													bg-image('./img/stars/star24_off')	
									.rating_section
										float left
										font-size 10px
										color #ff6000
										margin-left 4px	
									.order_section
										float right	
										font-size 10px
										color #666
										transform scale(0.8)
								.shop_rating_order_right
									float right	
									font-size 0
									.delivery_style
										font-size 12px
										padding 1px
										transform-origin 35px 0px
										transform scale(0.7)
										display inline-block
										border-radius 2px
									.delivery_right
										font-size 12px
										color #02a774	
										border 1px solid #02a774
											
							.shop_distance
								clearFix()
								width 100%
								font-size 12px	
								.shop_delivery_msg
									float left
									color #666


</style>